<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>M3D-景观模型数据展示</title>
        <!--引用第三方的jQuery脚本库-->
        <script include="jquery" src="./static/libs/include-lib-local.js"></script>
        <!--引用Cesium脚本库文件-->
        <script src="./static/libs/include-cesium-local.js"></script>
        <!--引用示例页面样式表-->
        <link rel="stylesheet" href="./static/demo/cesium/style.css" />
        <script>
            //在JS脚本开发中使用严格代码规范模式，及时捕获一些不规范的行为，从而避免编程错误
            'use strict';

            //定义三维场景控件对象
            var webGlobe;
            //定义M3D图层对象
            var tileset;

            //加载三维场景
            function init() {
                //构造三维视图对象（视图容器div的id，三维视图设置参数）
                webGlobe = new Cesium.WebSceneControl('GlobeView', {});
                //构造视图功能管理对象（视图）
                var sceneManager = new CesiumZondy.Manager.SceneManager({
                    viewer: webGlobe.viewer
                });
                //设置鼠标位置信息展示控件：经纬度、高程、视角高度（容器id）
                sceneManager.showPosition('coordinate_location');
                //构造第三方图层对象
                var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({
                    viewer: webGlobe.viewer
                });
                //加载天地图
                /* var tdtLayer = thirdPartyLayer.appendTDTuMap({
                    //天地图经纬度数据
                    url: 'http://t3.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}',
                    //开发token （请到天地图官网申请自己的开发token，自带token仅做功能验证随时可能失效）
                    token: '9c157e9585486c02edf817d2ecbc7752',
                    //地图类型 'vec'矢量 'img'影像 'ter'地形
                    ptype: 'img'
                }); */

                //加载M3D地图文档（服务地址，配置参数）
                var { protocol, ip, port } = window.webclient;
                ip = 'localhost';
                port = 7777;
                tileset = new Cesium.MapGISM3DSet({
                    url: `${protocol}://${ip}:${port}/福田地质体_挖后效果.mcj`, // 
                    igserver: false
                });
                /* tileset = new Cesium.Cesium3DTileset({
                    url: `${protocol}://${ip}:${port}/福田地质体_挖后效果.mcj`, //
                    igserver: false
                }); */

                webGlobe.viewer.scene.primitives.add(tileset);

                tileset.readyPromise.then(function (primitives) {
                    console.log('file m3d', primitives);
                    webGlobe.viewer.zoomTo(primitives, new Cesium.HeadingPitchRange(0.0, -0.5, primitives.boundingSphere.radius * 2.0));
                });
            }
        </script>
    </head>

    <body onload="init()">
        <!--三维场景容器-->
        <div id="GlobeView"></div>
        <!--位置信息容器-->
        <div id="coordinateDiv" class="coordinateClass">
            <label id="coordinate_location"></label>
        </div>
    </body>
</html>
